import { reactive } from 'vue';
import { moveToTop, moveToBottom, moveUp, moveDown, deleteShapeById } from '../event/shape.actions';
import { currentShape } from './shapes';

/*
描述:
    打开右键菜单的步骤
    在父元素上设置:data-contextmenu
    调用：showContextmenu()方法
    设置右键菜单的内容: setMenuData()

    同个页面有多个右键菜单，父级元素需要用.capture
    <div class="parent" @contextmenu.capture="init" data-contextmenu>
      <div class="child" @contextmenu="sub"></div>
    </div>
*/

/* 全局只需要引用一次即可 */
export const contextmenu = reactive({
  /* 对应的菜单数据 */
  data: [] as Array<any>,
  /* 右键菜单的临时数据 */
  tempdata: null as any,
  /* 显示菜单 */
  show: false,
});

/**
 * 描述:方法描述
 *  */
export const showContextmenu = () => {
  contextmenu.show = true;
};

/**
 * 描述:设置右键菜单的数据
 *  */
export const setMenuData = (data: Array<any>) => {
  contextmenu.data = data;
  contextmenu.show = true;
};

/**
 * 描述:设置右键菜单产生的临时值
 */
export const setTempData = (data: any) => {
  contextmenu.tempdata = data;
};

/**
 * 描述:获取临时值
 *
 */
export const getTempData = (): any => {
  return contextmenu.tempdata;
};
export const shapeContextmenu = ref([
  {
    title: '置顶',
    exec: () => {
      moveToTop(currentShape.value.z);
    },
    icon: 'arrow-up-square',
  },
  {
    title: '置底',
    exec: () => {
      moveToBottom(currentShape.value.z);
    },
    icon: 'arrow-down-square',
  },
  {
    title: '上移一层',
    exec: () => {
      moveUp(currentShape.value.z);
    },
    icon: 'arrow-bar-up',
  },
  {
    title: '下移一层',
    exec: () => {
      moveDown(currentShape.value.z);
    },
    icon: 'arrow-bar-down',
  },
  {
    title: '删除',
    exec: () => {
      deleteShapeById(currentShape.value.id);
    },
    icon: 'trash',
  },
]);
